<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			
			p{
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p元素，内容行内元素*/
				/*结论：文本不能浮动，特点：块包行*/
			}
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/4.png" alt="石矶娘娘" width="200px"  height="150px"/>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel autem illo a rem veniam magni ea consequuntur perferendis, est eius minima rerum alias quas ratione impedit ex sapiente ut earum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt! Ut dicta sequi provident voluptates molestias? Dolor architecto alias doloremque ducimus doloribus, laborum dolorum voluptatem ipsum quidem iusto impedit dignissimos? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, earum quas autem et dicta nisi explicabo vero inventore eaque provident unde ratione porro error ex, architecto reiciendis, tempore temporibus amet! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum quas voluptatem debitis rem fuga reprehenderit quis. Ipsam accusamus modi eius temporibus libero repudiandae, corporis placeat error vero dolorem provident! Cumque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam possimus tenetur eaque ipsum accusantium illo, repellendus doloribus unde placeat consectetur excepturi! Velit optio dolorem eius iure, veritatis illo omnis architecto.  </p>
	</body>
</html>